import { Breadcrumb } from "antd"
import { HOME_URL } from "@/config/config"
import { Link, useLocation } from "react-router-dom"
import { useSelector } from "react-redux"
import { State } from "@/redux/interface"

const BreadcrumbNav = () => {
    const {pathname} = useLocation()
    const breadcrumbState = useSelector((state:State) => state.breadcrumb)
    const breadcrumbList = breadcrumbState.breadcrumbList[pathname] || []

    const list = breadcrumbList.filter((item:string) => item!=='首页').map((item:string) => ({
        title:item
    }))

    return (
        <Breadcrumb
            items={[
                {
                    title: <Link to={HOME_URL}>首页</Link>,
                },
                ...list
            ]}
        ></Breadcrumb>
    )
}

export default BreadcrumbNav